import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography } from 'antd';
import styles from './Welcome.less';
import IconFont from '../components/SvgIcon/index';
import { useAccess } from 'umi';

const CodePreview: React.FC = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);

const Welcome: React.FC = () => {
  const access = useAccess();
  return (
    <PageContainer>
      <Card>
        <Alert
          message={'更快更强的重型组件，已经发布。'}
          type="success"
          showIcon
          banner
          style={{
            margin: -12,
            marginBottom: 24,
          }}
        />
        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
        <IconFont
          type="icon-info-circle"
          style={{
            color: 'red',
          }}
        />
        <IconFont
          type="icon-Dollar"
          style={{
            color: 'red',
          }}
        />

        {access.canSsm && <CodePreview>access is Ssm 才可见！！！！</CodePreview>}
      </Card>
    </PageContainer>
  );
};

export default Welcome;
